import React, { lazy, useEffect } from 'react';
import './index.less';
import { Menu } from 'antd';
import useRouter from 'hooks/use-router';
import webMenus from './menus/web';
import computerBaseMenus from './menus/computerBase'
import msMenus from './menus/ms'
import dailyMenus from './menus/daily'
import frameMenus from './menus/frame'
import nodeMenus from './menus/node'
import { flattenDeep } from 'lodash';
const keyMenuMap: any = {
    web: webMenus,
    computerBase: computerBaseMenus,
    ms: msMenus,
    daily: dailyMenus,
    frame: frameMenus,
    node: nodeMenus
}
const HomePage = (props: any) => {
    const router = useRouter();
    console.log(router);
    const [activeKey, setActiveKey] = React.useState('');

    useEffect(() => {
        let result = ''
        Object.keys(keyMenuMap).forEach((key) => {
            const menus = flattenDeep(keyMenuMap[key].map((item: any) => item.children))
            const exist = menus.find((item: any) => '/' + item.key === router.pathname)
            if (exist) {
                result = key
            }
        })
        console.log(result)
        setActiveKey(result || 'web')
    }, [])

    const onTopMenuClick = (event: any) => {
        setActiveKey(event.key);
    };

    const [menus, setMenus] = React.useState([]);
    React.useEffect(() => {
        console.log(activeKey);
        setMenus(keyMenuMap[activeKey] || []);
    }, [activeKey]);

    const [activeMenu, setActiveMenu] = React.useState(router.pathname.slice(1))
    const onSideMenuClick = (event: any) => {
        router.push(`/${event.key}`)
        setActiveMenu(event.key)
    }
    
    // useEffect(() => {
    //     (document.getElementById('loading') as any).style.display = 'none'
    // }, [])

    return (
        <section className="home">
            <header className="header">
                <Menu mode="horizontal" activeKey={activeKey} onClick={onTopMenuClick}>
                    <Menu.Item key="web">前端</Menu.Item>
                    <Menu.Item key="computerBase">计算机基础</Menu.Item>
                    {/* <Menu.Item key="node">Node</Menu.Item> */}
                    <Menu.Item key="ms">面试</Menu.Item>
                    <Menu.Item key="daily">每日知识</Menu.Item>
                    <Menu.Item key="frame">框架</Menu.Item>
                    <Menu.Item key="node">Node</Menu.Item>
                </Menu>
            </header>
            <section className="section">
                <aside className="aside">
                    <Menu mode="inline" onClick={onSideMenuClick} selectedKeys={[activeMenu]}>
                        {menus?.map((subMenu: any) => (
                            <Menu.SubMenu key={subMenu.key} title={subMenu.label}>
                                {subMenu.children.map((menu: any) => (
                                    <Menu.Item key={menu.key} className="long-text">{menu.label}</Menu.Item>
                                ))}
                            </Menu.SubMenu>
                        ))}
                    </Menu>
                </aside>
                <main className="main">{props.children}</main>
            </section>
        </section>
    );
};
export default HomePage;
